<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="商家资料"></uni-nav-bar>
		<view class="background"></view>
		<view class="info-container">
			<view class="item">
				<view class="label">负责人：</view>
				<view class="value">张大美</view>
			</view>
			<view class="item">
				<view class="label">身份证号码：</view>
				<view class="value">40365236541232563</view>
			</view>
			<view class="item">
				<view class="label">手机号：</view>
				<view class="value">18893039203</view>
			</view>
			<view class="item">
				<view class="label">店名：</view>
				<view class="value">大美汽修店</view>
			</view>
			<view class="item">
				<view class="label">工商营业执照号码：</view>
				<view class="value">4252336467474764646</view>
			</view>
			<view class="item">
				<view class="label">经营区域：</view>
				<view class="value">焦作市山阳区</view>
			</view>
			<view class="item">
				<view class="label">地址：</view>
				<view class="value">山阳区迎宾路32号</view>
			</view>
		</view>
		<view class="merchant-profile">
			<view class="profile-title">商家简介</view>
			<view class="profile-content">
				大美汽修店是一家专业的汽车维修店铺，拥有多年的汽车维修经验和专业的维修团队。我们致力于为客户提供高质量、高效率的汽车维修服务，无论是日常保养还是故障维修，我们都能为您解决。
			</view>
		</view>
		<view class="merchant-profile">
			<view class="profile-title">身份证正反面照片</view>
			<view class="id-card-container">
				<image class="id-card-img" src="/static/uni.png" mode="aspectFit"></image>
				<image class="id-card-img" src="/static/uni.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="merchant-profile">
			<view class="profile-title">营业执照</view>
			<view class="license-container">
				<image class="license-img" src="/static/uni.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="merchant-profile">
			<view class="profile-title">门店照片</view>
			<view class="store-container">
				<image class="store-img" src="/static/uni.png" mode="aspectFit"></image>
			</view>
		</view>
		<button @click="goModify" class="modify-button">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			goModify() {
				uni.navigateTo({
					url: "/packgeBusinessInformation/modify/modify"
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 150rpx;
	}

	.info-container {
		top: -110rpx;
		position: relative;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		width: 90%;
		/* 设置宽度，可根据需要调整 */
		margin-bottom: -80rpx;
		/* 调整与商家简介的间距 */
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		margin: 20rpx 0;
	}

	.label {
		font-size: 32rpx;
	}

	.value {
		font-size: 32rpx;
	}

	.merchant-profile {
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		width: 88%;
		/* 设置宽度，与 info-container 保持一致 */
		margin-top: 20rpx;
		/* 与 info-container 之间的间距 */
	}

	.profile-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.profile-content {
		padding-left: 20rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.id-card-container {
		display: flex;
		justify-content: space-between;
		height: 200rpx;
	}

	.id-card-img {
		width: 48%;
		height: auto;
		border-radius: 10rpx;
	}

	.license-container,
	.store-container {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		height: 200rpx;
	}

	.license-img,
	.store-img {
		max-width: 100%;
		height: auto;
		border-radius: 10rpx;
	}

	.modify-button {
		margin: 20rpx 0;
		width: 300rpx;
		border-radius: 40rpx;
		color: white;
		background: linear-gradient(to right, #2E81FA, #0A64E7);
		/* 从左至右的蓝色渐变 */
	}
</style>